<template>
	<view class="signal">
		<view class="tabs flex-between">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">优选信号</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">USDT</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">币本位</view>
			<view class="flex-center" :class="{active:tabIndex == 3}" @click="changeTab(3)">待晋级</view>
		</view>

		<view class="content">
			<!-- 优选信号 -->
			<view class="card1" v-if="tabIndex == 0">
				<view class="top">
					<view class="card" v-for="(item,index) in 3" :key="index">
						<view class="info flex">
							<image src="/static/1.jpg" mode="aspectFill"></image>
							<view class="user">
								<view class="h3">比特领航员</view>
								<text>OKEX USDT合约</text>
							</view>
						</view>
						<view class="num flex-between">
							<view class="item">
								<view class="h3">118.07%</view>
								<text>收益率</text>
							</view>
							<view class="level item flex">
								<view class="flex-center">T</view>
								<text>白银</text>
							</view>
							<view class="item">
								<view class="h3">15445.1256</view>
								<text>收益 USDT</text>
							</view>
							<view class="item">
								<view class="h3">222人跟随</view>
								<text>跟随者</text>
							</view>
						</view>
					</view>
				</view>
				<swiper class="swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item,index) in 3" :key="index">
						<image src="/static/1.jpg" mode="aspectFill"></image>
					</swiper-item>

				</swiper>

				<view class="title flex-between">
					<view class="h3">USDT推荐信号</view>
					<view class="right flex" @click="changeTab(1)">
						全部
						<image src="/static/arrow.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="list-box">
					<view class="list" v-for="(item,index) in 3" :key="index" @click="goPage('/pages/signal/detail')">
						<view class="top flex-between">
							<view class="left">
								<image src="/static/1.jpg" mode="aspectFill"></image>
								<view class="item">
									<view class="h3">比特领航员</view>
									<view class="level flex">
										<view class="flex-center">T</view>
										<text>白银</text>
									</view>
								</view>

							</view>
							<view class="middle">
								<view class="item">
									<view class="h3">118.07%</view>
									<text>收益率</text>
								</view>
								<view class="item">
									<view class="h3">2323人跟随</view>
									<text>
										OKEX USDT合约
									</text>
								</view>
							</view>
							<view class="right">
								<view class="item">
									<view class="h3">15564.2356</view>
									<text>收益 USDT</text>
								</view>
							</view>
						</view>
						<view class="bottom flex-between">
							<view class="time">最后持仓时间：2021-04-22 07:50:20</view>
							<view class="btn flex-center red">跟随</view>
							<view class="btn flex-center">关注</view>

						</view>
					</view>
				</view>

				<view class="title flex-between">
					<view class="h3">币本位推荐信号</view>
					<view class="right flex" @click="changeTab(2)">
						全部
						<image src="/static/arrow.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="empty flex-center-column">
					<image src="/static/noMessage.png" mode="widthFix"></image>
					<view class="h3">暂无记录</view>
				</view>
			</view>

			<view class="card2" v-if="tabIndex == 1 || tabIndex == 2">
				<view class="menus flex-between">
					<view class="item flex-center" :class="{active:menuIndex == 0}" @click="changeMenus(0)">
						<text>跟随者</text>
						<view class="flex-center-column">
							<text :class="{active:menuP}">▲</text>
							<text :class="{active:!menuP}">▼</text>
						</view>
					</view>
					<view class="item flex-center" :class="{active:menuIndex == 1}" @click="changeMenus(1)">
						<text>总收益</text>
						<view class="flex-center-column">
							<text :class="{active:menuP}">▲</text>
							<text :class="{active:!menuP}">▼</text>
						</view>
					</view>
					<view class="item flex-center" :class="{active:menuIndex == 2}" @click="changeMenus(2)">
						<text>24小时收益</text>
						<view class="flex-center-column">
							<text :class="{active:menuP}">▲</text>
							<text :class="{active:!menuP}">▼</text>
						</view>
					</view>
					<view class="item flex-center" :class="{active:menuIndex == 3}" @click="changeMenus(3)">
						<text>筛选</text>
						<view class="flex-center-column">
							<text :class="{active:menuIndex == 3}">▼</text>
						</view>
					</view>
				</view>
				<view class="list-box">
					<view class="list" v-for="(item,index) in 3" :key="index"  @click="goPage('/pages/signal/detail')">
						<view class="top flex-between">
							<view class="left">
								<image src="/static/1.jpg" mode="aspectFill"></image>
								<view class="item">
									<view class="h3">比特领航员</view>
									<view class="level flex">
										<view class="flex-center">T</view>
										<text>白银</text>
									</view>
								</view>

							</view>
							<view class="middle">
								<view class="item">
									<view class="h3">118.07%</view>
									<text>收益率</text>
								</view>
								<view class="item">
									<view class="h3">2323人跟随</view>
									<text>
										OKEX USDT合约
									</text>
								</view>
							</view>
							<view class="right">
								<view class="item">
									<view class="h3">15564.2356</view>
									<text>收益 USDT</text>
								</view>
							</view>
						</view>
						<view class="bottom flex-between">
							<view class="time">最后持仓时间：2021-04-22 07:50:20</view>
							<view class="btn flex-center red">跟随</view>
							<view class="btn flex-center">关注</view>

						</view>
					</view>
				</view>
			</view>

			<view class="card3" v-if="tabIndex == 3">
				<view class="top flex-between">
					<view class="left">
						<view class="h3">晋级成功</view>
						<text>昨日晋级0位交易员</text>
					</view>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
				<view class="title">正在晋级</view>
				<view class="list-box1">
					<block v-for="(item,index) in 5" :key="index">
						<view class="list">
							<view class="list-top flex-between">
								<view class="left flex-between">
									<view class="user">
										<image src="/static/1.jpg" mode="aspectFill"></image>
										<view class="name">lankin1882</view>
									</view>
									<view class="tip">
										<text>已完成收益USDT \n</text>
										<text>Huobi USDT合约</text>
									</view>
								</view>
								<view class="right">
									<view class="h3">249.7211</view>
									<text>收益 USDT</text>
								</view>
							</view>
							<view class="list-middle flex-between">
								<view class="btn flex-center">
									关注
								</view>
								<view class="btn flex-center">
									支持
								</view>
							</view>
							<view class="list-bottom flex-center">
								已有33位用户支持 | 剩余晋级时间- 188小时
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<view class="popup flex" v-if="showPopup">
			<view class="box">
				<view class="top flex-between">
					<view>筛选</view>
					<icon type="cancel" size="20" @click="closePopup"></icon>
				</view>
				<view class="list">
					<text>交易平台</text>
					<view class="flex">
						<block v-for="(item,index) in plat" :key="index">
							<view class="item" :class="{active:platIndex == index}" @click="platIndex = index">{{item}}
							</view>
						</block>

					</view>
				</view>
				<view class="list">
					<text>交易员评级</text>
					<view class="flex">
						<block v-for="(item,index) in level" :key="index">
							<view class="item" :class="{active:levelIndex == index}" @click="levelIndex = index">
								{{item}}</view>
						</block>

					</view>
				</view>
				<view class="list">
					<text>入驻时长</text>
					<view class="flex">
						<block v-for="(item,index) in times" :key="index">
							<view class="item" :class="{active:timesIndex == index}" @click="timesIndex = index">
								{{item}}</view>
						</block>

					</view>
				</view>
				<view class="flex-between btns">
					<view class="reset btn flex-center" @click="resetPopup">重置</view>
					<view class="confirm btn flex-center" @click="confirmPopup">显示结果</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, //顶部选项卡切换
				menuIndex: 0, //筛选条件切换
				menuP: true, //true:箭头向上，false:箭头向下
				plat: ['OK', 'GOEX', 'HuoBi'], //交易平台
				platIndex: -1,
				level: ['白银', '黄金', '钻石', '大咖'],
				levelIndex: -1,
				times: ['1周以上', '1月以上', '半年以上', '一年以上'],
				timesIndex: -1,
				showPopup: false
			}
		},
		methods: {
			goPage(url){
				// 判断拦截
				
				// 结束
				uni.navigateTo({
					url:url
				})
			},
			// 改变顶部选项卡
			changeTab(i) {
				this.tabIndex = i;
				this.menuIndex = 0;
				this.menuP = true;
			},
			// 改变USDT和币本位筛选条件
			changeMenus(m, n) {
				if (this.menuIndex != m) {
					this.menuIndex = m;
					this.menuP = true;
				} else {
					this.menuP = !this.menuP;
				}
				if (m == 3) {
					this.showPopup = true;
					uni.hideTabBar()
				}
			},
			// 关闭筛选弹框
			closePopup() {
				uni.showTabBar();
				this.showPopup = false;
				this.platIndex = -1;
				this.levelIndex = -1;
				this.timesIndex = -1;
			},
			// 筛选弹框重置
			resetPopup() {
				this.platIndex = -1;
				this.levelIndex = -1;
				this.timesIndex = -1;
			},
			// 筛选弹框确定
			confirmPopup() {
				// 进行筛选


				// 筛选之后
				this.closePopup()
			}
		}
	}
</script>

<style lang="less">
	@color: #d4237a;

	.signal {
		padding-top: 70rpx;
		.tabs {
			background: white;
			position: fixed;
			top: 0;
			width: 100vw;
			z-index: 10;
			view {
				width: 25%;
				font-size: 30rpx;
				font-weight: bold;
				color: #666;
				line-height: 2;
				padding-bottom: 10rpx;

				&.active {
					color: #000;
					position: relative;

					&::after {
						content: "";
						display: block;
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						bottom: 5rpx;
						left: calc(50% - 15rpx);
						background: @color ;
					}
				}
			}

		}

		.content {
			padding: 24rpx;

			.list-box {
				.h3 {
					font-size: 30rpx;
					font-weight: bold;
					margin: 10rpx 0 5rpx;
				}

				text {
					font-size: 24rpx;
					color: #999;
				}

				.level {
					view {
						background: @color;
						color: #fff;
						width: 30rpx;
						height: 26rpx;
						font-size: 24rpx;
						margin-right: 10rpx;
						padding-top: 10rpx;
					}
				}

				.list {
					background: white;
					padding: 24rpx;
					border-radius: 10rpx;
					margin-bottom: 24rpx;

					.top {
						align-items: stretch;

						.item {
							height: 100rpx;
						}

						.left {
							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
							}

						}
					}

					.bottom {
						.time {
							font-size: 24rpx;
							color: #999;
						}

						.btn {
							width: 95rpx;
							height: 50rpx;
							border: 1rpx solid #eee;
							font-size: 26rpx;
							border-radius: 25rpx;

							&.red {
								background: @color;
								color: #fff;
							}
						}
					}
				}
			}

			.menus {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 30rpx;

				.item {
					background: white;
					padding: 10rpx 15rpx;
					border-radius: 30rpx;

					view {
						position: relative;
						width: 24rpx;
						height: 24rpx;
						top: -8rpx;

						text {
							position: absolute;
							font-size: 10rpx;
							transform: scale(.7);

							&:nth-child(2) {
								bottom: -18rpx;
							}
						}
					}

					&.active {
						&>text {
							color: #000;
						}

						.active {
							color: #000;
						}
					}

					&:last-child {
						view {
							top: 0;
						}
					}

				}
			}

			.card1 {
				.top {
					width: 100%;
					overflow-x: scroll;
					white-space: nowrap;

					.card {
						width: 550rpx;
						background: white;
						padding: 24rpx;
						border-radius: 10rpx;
						margin-right: 24rpx;
						display: inline-block;

						.info {
							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								margin-right: 15rpx;
							}
						}

						.h3 {
							font-size: 30rpx;
							font-weight: bold;
						}

						text {
							font-size: 24rpx;
							color: #999;
						}

						.num {
							flex-wrap: wrap;
							margin-top: 10rpx;

							.item {
								width: 40%;
								line-height: 1;
								padding: 15rpx 0;
							}

							.level {
								view {
									background: @color;
									color: #fff;
									width: 30rpx;
									height: 26rpx;
									font-size: 24rpx;
									margin-right: 10rpx;
									
								}
							}
						}
					}
				}

				.swiper {
					height: 200rpx;
					margin-top: 40rpx;

					image {
						width: 100%;
						height: 160rpx;
						border-radius: 80rpx;
					}
				}

				.title {
					line-height: 2.5;

					.h3 {
						font-size: 32rpx;
						font-weight: bold;
					}

					text {
						font-size: 26rpx;
						color: #666;
						margin-left: 30rpx;
					}

					.right {
						font-size: 26rpx;
						color: #666;

						image {
							width: 24rpx;
							height: auto;
						}
					}
				}

				.empty {
					height: 30vh;

					image {
						width: 120rpx;
						height: auto;
					}

					.h3 {
						font-size: 30rpx;
						margin: 40rpx 0 12rpx;
					}

					.p {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			
			.card3{
				.top{
					padding: 30rpx;
					border-radius: 15rpx;
					background: white;
					image{
						width: 30rpx;
						height:auto;
					}
					.h3{
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					text{
						font-size: 26rpx;
						color:#999;
					}
				}
				.title{
					font-size: 32rpx;
					font-weight: bold;
					line-height: 2.5;
				}
				.list-box1{
					.list{
						background: white;
						padding: 30rpx 24rpx 0;
						border-radius: 10rpx;
						margin-bottom: 30rpx;
						text{
							font-size: 24rpx;
							color:#999;
						}
						
						.list-top{
							align-items: flex-start;
							image{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
							.left{
								align-items: flex-end;
								width: 430rpx;
								.name{
									font-size: 26rpx;
								}
							}
							.right{
								.h3{
									font-size: 32rpx;
								}
							}
						}
						.list-middle{
							margin: 20rpx 0 5rpx;
							.btn{
								height: 80rpx;
								background: #e5e5e5;
								width: 30%;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 10rpx;
								&:last-child{
									width: 65%;
									color:@color;
								}
							}
						}
						.list-bottom{
							line-height: 3;
							font-size: 24rpx;
							color:#666;
						}
					}
				}
			}
		}

		.popup {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .5);
			z-index: 10;
			align-items: flex-end;

			.box {
				width: 100vw;
				background: white;
				border-radius: 20rpx 20rpx 0 0;
				padding: 30rpx 20rpx;

				.top {
					margin-bottom: 15rpx;

					view {
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.list {
					padding: 15rpx 0;

					text {
						font-size: 32rpx;

					}

					&>view {
						margin-top: 15rpx;
					}

					.item {
						width: 150rpx;
						line-height: 2;
						text-align: center;
						border: 1px solid #ddd;
						box-sizing: border-box;
						margin-right: 30rpx;
						font-size: 28rpx;
						border-radius: 30rpx;

						&:last-child {
							margin-right: 0;
						}

						&.active {
							background: @color;
							color: #fff;
						}
					}
				}

				.btns {
					margin-top: 30rpx;

					.btn {
						width: 48%;
						height: 80rpx;
						border-radius: 40rpx;
						background: #eee;
						font-size: 30rpx;
						font-weight: bold;

						&.confirm {
							background: @color;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
